<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    * {
      margin: 0;
    }

    .box {
      /* 宽度
        width : 支持px、%百分比、em、rem、vw
              vw: 可视宽，100vw表示满屏
              em : 相对于父元素字体大小，1em = 父元素的font-size尺寸
              rem : 相对于html元素字体大小，1rem = html元素的font-size尺寸
      */
      /* 
        height: 支持px、%百分比、em、rem、vh
              vh:可视宽，100vh表示满屏
              em : 相对于父元素字体大小，1em = 父元素的font-size尺寸
              rem : 相对于html元素字体大小，1rem = html元素的font-size尺寸 
      */

      width: 300px;
      height: 100vh;
      background-color: orange;
      /* 
        最大宽，限制元素的最大宽度
          max-width:
        最小宽，限制元素的最小宽度
          min-width:

        最大高,限制元素的最大高度
          max-height:
        最小高，限制元素的最小高度
          min-height:
      */
      max-width: 280px;
    }
  </style>
  <div class="box"></div>
  <style>
    .min {
      height: 50px;
      background-color: pink;
      min-width: 500px;
      margin-bottom: 20px;
    }
  </style>
  <div class="min"></div>

  <style>
    .padding {
      width: 100px;
      height: 100px;
      background-color: black;
      /* 
        单独定义padding方向：
              padding-left：左填充
              padding-right：右填充
              padding-top：上填充
              padding-bottom：下填充
      */
      /* 
          padding缩写
                padding: 10px ; 四个方向都是10px
                padding: 10px   15px; 上下10px，左右15px
                padding: 5px  8px  10px 15px ; 上右下左，上5px，下8px，右10px,左15px

      */
      padding: 10px;
      padding: 10px 15px;
      padding: 5px 8px 10px 15px;

      /* 
        margin缩写，与padding一致,
          能用margin-bottom解决就不要用margin-top,margin-bottom会和margin-top重合
      */
      margin: 10px 15px;
      margin: 30px 8px 10px 15px;
    }
  </style>
  <div class="padding"></div>


  <!-- 
    border和outline的区别
        1.border会占据文档流，outline不占据文档流
        2.outline有outline-offset偏移，border不具备偏移
        3.ouline不能单独设置一边，border可以
  -->
  <style>
    .border {
      width: 100px;
      height: 100px;
      /* 
        border : 边框尺寸    线型     边框颜色
      */
      border: 1px solid  black;
      /* 
        outline : 轮廓线尺寸   线型    轮廓线颜色
      */
      outline: 1px solid  pink;
      /* 
        轮廓线偏移
      */
      outline-offset: 5px;
      /* 
        设置单边边框
      */
      border-left: 2px solid  orange;
      margin-left: 10px;
    }
  </style>
  <div class="border"></div>
  <!-- input默认具有outline -->
  <input type="text">
</body>

</html>